$namespcae: "vs" !default;
$block-symbol: "-" !default;
$element-symbol: "__" !default;
$modifier-symbol: "--" !default;

@mixin b($block) {
  #{$namespcae + $block-symbol + $block} {
    @content;
  }
}

@mixin e($element) {
  $selector: &;

  @at-root {
    #{$selector + $element-symbol + $element} {
      @content;
    }
  }
}

@mixin m($modifier) {
  $selector: &;

  @at-root {
    #{$selector + $modifier-symbol + $modifier} {
      @content;
    }
  }
}
$baseColor: #2c2c2c;
$baserGrey: #777777;
$baseline: #f6f6f6;

/** 弹性布局 **/
.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  &.middle {
    align-items: center;
  }
  &.bottom {
    align-items: flex-end;
  }
  &.stretch {
    align-items: stretch;
  }
  &.between {
    justify-content: space-between;
  }
  &.around {
    justify-content: space-around;
  }
  &.center {
    justify-content: center;
  }
  &.end {
    justify-content: flex-end;
  }
  &.wrap {
    flex-wrap: wrap;
  }
  &.reverse {
    flex-direction: row-reverse;
  }
  &.column {
    flex-direction: column;
    &.reverse {
      flex-direction: column-reverse;
    }
  }
  & > .stretch {
    align-self: stretch;
  }
  & > .flex-start {
    align-self: flex-start;
  }
  & > .flex-end {
    align-self: flex-end;
  }
  & > .flex-center {
    align-self: center;
  }
}
.flex-item {
  flex: 1;
  min-width: 0;
}
.flex_1 {
  flex: 1;
}
.flex-grow {
  flex-grow: 0;
}
.flex-shrink {
  flex-shrink: 0;
}
/*超出一行显示省略号...*/
.Beyond_one {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*超出两行显示省略号...*/
.Beyond_two {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/*超出三行显示省略号...*/
.Beyond_three {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

// 公用布局
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}
.content {
  overflow-y: auto;
}
.footer {
  padding:0 10px 17px;
}
.cut-out-buttons{
  border: 0.5px solid #BFBFBF!important;
  color: #1642F4!important;
  background-color: #fff;
}
.cut-out-buttons-mr{
  margin-right: 7.5px;
}
::-webkit-scrollbar {
  width: 0;
  height: 1px;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.form-mb{
  margin-bottom: 10px;
}
.form-mb-15{
  margin-bottom: 15px;
}
.form-mt{
  margin-top: 10px;
}
.form-mr{
  margin-right: 6px;
}

/*红色*/
.colorRed{
  color: #E8464A !important;
}
.colorGreen {
  color: #5FAB3D !important;
}
.colorBlue {
  color: #1642F4 !important;
}
.colorYellow {
  color: #FF9900 !important;
}

.settingsColorRed{
  color: #EB3F31 !important;
}
.settingsColorBlue{
  color: #1642F4 !important;
}
.settingsColorYellow{
  color: #FF9900 !important;
}

// 搜索
.search-middle {
  flex: 1;
  background: #F7F7F7;
  border-radius: 4px;
  display: flex;
  align-items: center;

  .van-field {
    background: transparent;
    height: 22px;
    :deep(van-field__control){
      font-size: 7px;
    }
    :deep(.van-field__left-icon) {
      color: #C4C4C4;
      margin-top: 1.2px;
    }
  }
}
